
.progress_container {
  padding: 0 10px 20px 10px;
  box-sizing: border-box;

  .progress_info {
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 20px;

    .progress_person {
      display: flex;
      align-items: center;
      margin-top: 10px;
      justify-content: space-between;
      padding: 10px 15px 8px 15px;
      box-sizing: border-box;
      border-bottom: 1px solid #f6f6f6;

      .flex {
        display: flex;
        align-items: center;
      }

      .image {
        display: flex;
        align-items: center;
        margin-right: 5px;

        image {
          border-radius: 5px;
          width: 30px;
          height: 30px;
        }
      }

      .name {
        font-weight: bold;
      }

      .arrow_right {
        display: flex;
        align-items: center;

        .arrow_right_icon {
          font-size: 16px;
          color: #afafaf;
        }
      }
    }

    .progress_demand {
      padding: 18px 15px;
      box-sizing: border-box;
    }
  }

  .progress {
    display: flex;
    align-content: center;
    margin-bottom: 30px;
    min-width: 100%;

    &.step0 .progress_span:nth-child(-n+1),
    &.step1 .progress_span:nth-child(-n+2),
    &.step2 .progress_span:nth-child(-n+3),
    &.step3 .progress_span:nth-child(-n+4),
    &.step31 .progress_span:nth-child(-n+5),
    &.step32 .progress_span:nth-child(-n+5),
    &.step4 .progress_span:nth-child(-n+7),
    &.step5 .progress_span:nth-child(-n+8) {
      &:after {
        background: $uni-color-success;
      }

      .progress_span_icon {
        background: $uni-color-success;
        border-color: #4ed463 !important;
      }

      .progress_span_label {
        background: $uni-color-success;
        color: #ffffff !important;

        &:before {
          border-top-color: $uni-color-success !important;
          border-bottom-color: $uni-color-success !important;

        }
      }
    }

    &.step5 .progress_span:nth-child(5) {
      &:after {
        background: $uni-color-error !important;
      }

      .progress_span_icon {
        background: $uni-color-error;
        border-color: $uni-color-error !important;
      }

      .progress_span_label {
        background: $uni-color-error;
        color: #ffffff !important;

        &:before {
          border-top-color: $uni-color-error !important;
          border-bottom-color: $uni-color-error !important;

        }
      }
    }

    .progress_span {
      position: relative;
      height: 80px;

      &:nth-child(odd) {
        .progress_span_label {
          top: 0;
        }

        .progress_span_label {
          &:before {
            border-top: 6px solid #fff;
            bottom: -5px;
          }
        }
      }

      &:nth-child(even) {
        .progress_span_label {
          bottom: 0;
        }

        .progress_span_label {
          &:before {
            border-bottom: 6px solid #fff;
            top: -5px;
          }
        }
      }

      &:after {
        content: "";
        width: 100%;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        background: #dadada;
        z-index: 1;
      }

      .progress_span_icon {
        width: 6px;
        height: 6px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #e0e0e0;
        border-radius: 100px;
        border: 1px solid #dadada;
        z-index: 2;
      }

      .progress_span_label {
        font-size: 10px;
        position: absolute;
        word-break: keep-all;
        left: 50%;
        transform: translate(-50%, 0);
        background: #fff;
        padding: 5px 8px;
        border-radius: 5px;
        box-shadow: 1px 6px 13px 0px #d9d9d9;
        white-space:nowrap;
        &:before {
          content: "";
          width: 0px;
          height: 0px;
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0);
          z-index: 1;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;

        }
      }

      .progress_span_plc{
        opacity: 0;
        width: 70px;
      }
    }

  }
}
